* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(–background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-family: ‘Montserrat’, sans-serif, Arial, ‘Microsoft Yahei’; */
}

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 800px;
    perspective-origin: left;
    transform-style: preserve-3d;
}

.line {
    position: absolute;
    width: 200px;
    height: 3px;
    border-radius: 3px;
    /* background-color: #fff; */
    background-image: linear-gradient(to right, var(–color), #ffffff50, transparent);
    animation: down 1s linear infinite both;
    animation-delay: calc(var(–d) * 0.3s);
}

.line::before,
.line::after {
    position: absolute;
    content: “”;
    width: inherit;
    height: inherit;
    background-image: inherit;
}

.line::before {
    filter: blur(5px);
}

.line::after {
    filter: blur(10px);
}

@keyframes down {
    0% {
        transform:
            translateY(calc(var(–z) * 60px)) translateZ(calc(var(–z) * 100px)) rotate(-45deg) translateX(calc(var(–x) * 100px));
    }

    100% {
        transform:
            translateY(calc(var(--z) * 60px)) translateZ(calc(var(--z) * 100px)) rotate(-45deg) translateX(calc(var(--x) * -100px));
    }
}